arrow-navigation.helper.test.js ➔ expectActive - Code Metrics - shopware/platform - Measure and Improve Code Quality continuously with Scrutinizer

arrow-navigation.helper.test.js ➔ expectActive F
last analyzed 2023-10-09 11:00 UTC

↳ Parent: src/Storefront/Resources/app/storefront/test/helper/arrow-navigation.helper.test.js

Complexity

Conditions

Size

Total Lines	12
Code Lines	8

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	22
eloc	8
dl	0
loc	12
rs	0
c	0
b	0
f	0

How to fix Complexity

import ArrowNavigationHelper from 'src/helper/arrow-navigation.helper';
import template from './arrow-navigation.helper.template.html';

const itemContainerSelector = 'ul.itemContainer';
const itemSelector = 'li';

describe('arrow-navigation.helper', () => {
    beforeEach(() => {
        document.body.innerHTML = template;
    });

    test('registers on element', () => {
        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        expect(navigationHelper._element).toBe(input);
        expect(navigationHelper._iterator).toBe(-1);
        expect(navigationHelper._parentSelector).toBe(itemContainerSelector);
        expect(navigationHelper._itemSelector).toBe(itemSelector);
    });

    test('move down through items infinite', () => {
        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector
        );

        const keydownEvent = new Event('keydown');

        keydownEvent.key = 'ArrowDown';

        for (let iteration = 0; iteration < 5; iteration++) {
            input.dispatchEvent(keydownEvent);
            expectActive(iteration % 3, navigationHelper);
        }
    });

    test('move down through items finite', () => {
        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            false
        );

        const keydownEvent = new Event('keydown');

        keydownEvent.key = 'ArrowDown';

        for (let iteration = 0; iteration < 5; iteration++) {
            input.dispatchEvent(keydownEvent);
            expectActive(iteration < 3 ? iteration : 2, navigationHelper);
        }
    });

    test('move up through items infinite', () => {
        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        const keydownEvent = new Event('keydown');

        keydownEvent.key = 'ArrowUp';

        for (let iteration = 0; iteration < 5; iteration++) {
            input.dispatchEvent(keydownEvent);
            expectActive(2 - (iteration % 3), navigationHelper);
        }
    });

    test('move up through items finite', () => {
        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            false
        );

        const keydownEvent = new Event('keydown');

        keydownEvent.key = 'ArrowUp';

        for (let iteration = 0; iteration < 5; iteration++) {
            input.dispatchEvent(keydownEvent);
            expectActive(0, navigationHelper);
        }
    });

    test('it does nothing if noting is selected', () => {
        const linkCallback = jest.fn();

        const link = document.querySelector('a');
        link.addEventListener('click', linkCallback);

        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(

            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        const event = new Event('keydown');

        event.key = 'Enter';

        input.dispatchEvent(event);
        expect(linkCallback).not.toHaveBeenCalled();
    });

    test('it does nothing if noting is selected', () => {
        const linkCallback = jest.fn();

        const link = document.querySelector('a');
        link.addEventListener('click', linkCallback);

        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(

            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        let event = new Event('keydown');

        event.key = 'ArrowDown';

        input.dispatchEvent(event);

        event = new Event('keydown');
        event.key = 'Enter';

        input.dispatchEvent(event);
        expect(linkCallback).toHaveBeenCalled();
    });

    test('it does nothing on other keys than arrows and enter', () => {
        const linkCallback = jest.fn();

        const link = document.querySelector('a');
        link.addEventListener('click', linkCallback);

        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        const event = new Event('keydown');

        event.key = 'tab';

        input.dispatchEvent(event);

        expect(navigationHelper._iterator).toBe(-1);
        expect(linkCallback).not.toBeCalled();
    });

    test('it does nothing if no items exists', () => {
        const items = document.querySelectorAll(itemSelector);
        items.forEach((node) => {
            node.remove();
        });

        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        const event = new Event('keydown');

        event.key = 'tab';

        input.dispatchEvent(event);

        expect(navigationHelper._iterator).toBe(-1);
    });

    test('it does nothing if no container exists', () => {
        const items = document.querySelectorAll(itemContainerSelector);
        items.forEach((node) => {
            node.remove();
        });

        const input = document.querySelector('input');
        const navigationHelper = new ArrowNavigationHelper(
            input,
            itemContainerSelector,
            itemSelector,
            true
        );

        const event = new Event('keydown');

        event.key = 'tab';

        input.dispatchEvent(event);

        expect(navigationHelper._iterator).toBe(-1);
    });

    function expectActive(index, navigationHelper) {

        const items = document.querySelectorAll('li');
        expect(navigationHelper._iterator).toBe(index);

        for (let i = 0; i < items.length; i++) {
            if (i === index) {
                expect(items[i].classList).toContain('is-active');
            } else {
                expect(items[i].classList).not.toContain('is-active');
            }
        }
    }
});

1			import ArrowNavigationHelper from 'src/helper/arrow-navigation.helper';
2			import template from './arrow-navigation.helper.template.html';
3
4			const itemContainerSelector = 'ul.itemContainer';
5			const itemSelector = 'li';
6
7			describe('arrow-navigation.helper', () => {
8			beforeEach(() => {
9			document.body.innerHTML = template;
10			});
11
12			test('registers on element', () => {
13			const input = document.querySelector('input');
14			const navigationHelper = new ArrowNavigationHelper(
15			input,
16			itemContainerSelector,
17			itemSelector,
18			true
19			);
20
21			expect(navigationHelper._element).toBe(input);
22			expect(navigationHelper._iterator).toBe(-1);
23			expect(navigationHelper._parentSelector).toBe(itemContainerSelector);
24			expect(navigationHelper._itemSelector).toBe(itemSelector);
25			});
26
27			test('move down through items infinite', () => {
28			const input = document.querySelector('input');
29			const navigationHelper = new ArrowNavigationHelper(
30			input,
31			itemContainerSelector,
32			itemSelector
33			);
34
35			const keydownEvent = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
36			keydownEvent.key = 'ArrowDown';
37
38			for (let iteration = 0; iteration < 5; iteration++) {
39			input.dispatchEvent(keydownEvent);
40			expectActive(iteration % 3, navigationHelper);
41			}
42			});
43
44			test('move down through items finite', () => {
45			const input = document.querySelector('input');
46			const navigationHelper = new ArrowNavigationHelper(
47			input,
48			itemContainerSelector,
49			itemSelector,
50			false
51			);
52
53			const keydownEvent = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
54			keydownEvent.key = 'ArrowDown';
55
56			for (let iteration = 0; iteration < 5; iteration++) {
57			input.dispatchEvent(keydownEvent);
58			expectActive(iteration < 3 ? iteration : 2, navigationHelper);
59			}
60			});
61
62			test('move up through items infinite', () => {
63			const input = document.querySelector('input');
64			const navigationHelper = new ArrowNavigationHelper(
65			input,
66			itemContainerSelector,
67			itemSelector,
68			true
69			);
70
71			const keydownEvent = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
72			keydownEvent.key = 'ArrowUp';
73
74			for (let iteration = 0; iteration < 5; iteration++) {
75			input.dispatchEvent(keydownEvent);
76			expectActive(2 - (iteration % 3), navigationHelper);
77			}
78			});
79
80			test('move up through items finite', () => {
81			const input = document.querySelector('input');
82			const navigationHelper = new ArrowNavigationHelper(
83			input,
84			itemContainerSelector,
85			itemSelector,
86			false
87			);
88
89			const keydownEvent = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
90			keydownEvent.key = 'ArrowUp';
91
92			for (let iteration = 0; iteration < 5; iteration++) {
93			input.dispatchEvent(keydownEvent);
94			expectActive(0, navigationHelper);
95			}
96			});
97
98			test('it does nothing if noting is selected', () => {
99			const linkCallback = jest.fn();
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `jest` seems to be never declared. If this is a global, consider adding a `/** global: jest */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
100			const link = document.querySelector('a');
101			link.addEventListener('click', linkCallback);
102
103			const input = document.querySelector('input');
104			const navigationHelper = new ArrowNavigationHelper(
			0 ignored issues – show Unused Code introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The constant `navigationHelper` seems to be never used. Consider removing it. Loading history...
105			input,
106			itemContainerSelector,
107			itemSelector,
108			true
109			);
110
111			const event = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
112			event.key = 'Enter';
113
114			input.dispatchEvent(event);
115			expect(linkCallback).not.toHaveBeenCalled();
116			});
117
118			test('it does nothing if noting is selected', () => {
119			const linkCallback = jest.fn();
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `jest` seems to be never declared. If this is a global, consider adding a `/** global: jest */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
120			const link = document.querySelector('a');
121			link.addEventListener('click', linkCallback);
122
123			const input = document.querySelector('input');
124			const navigationHelper = new ArrowNavigationHelper(
			0 ignored issues – show Unused Code introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The constant `navigationHelper` seems to be never used. Consider removing it. Loading history...
125			input,
126			itemContainerSelector,
127			itemSelector,
128			true
129			);
130
131			let event = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
132			event.key = 'ArrowDown';
133
134			input.dispatchEvent(event);
135
136			event = new Event('keydown');
137			event.key = 'Enter';
138
139			input.dispatchEvent(event);
140			expect(linkCallback).toHaveBeenCalled();
141			});
142
143			test('it does nothing on other keys than arrows and enter', () => {
144			const linkCallback = jest.fn();
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `jest` seems to be never declared. If this is a global, consider adding a `/** global: jest */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
145			const link = document.querySelector('a');
146			link.addEventListener('click', linkCallback);
147
148			const input = document.querySelector('input');
149			const navigationHelper = new ArrowNavigationHelper(
150			input,
151			itemContainerSelector,
152			itemSelector,
153			true
154			);
155
156			const event = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
157			event.key = 'tab';
158
159			input.dispatchEvent(event);
160
161			expect(navigationHelper._iterator).toBe(-1);
162			expect(linkCallback).not.toBeCalled();
163			});
164
165			test('it does nothing if no items exists', () => {
166			const items = document.querySelectorAll(itemSelector);
167			items.forEach((node) => {
168			node.remove();
169			});
170
171			const input = document.querySelector('input');
172			const navigationHelper = new ArrowNavigationHelper(
173			input,
174			itemContainerSelector,
175			itemSelector,
176			true
177			);
178
179			const event = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
180			event.key = 'tab';
181
182			input.dispatchEvent(event);
183
184			expect(navigationHelper._iterator).toBe(-1);
185			});
186
187			test('it does nothing if no container exists', () => {
188			const items = document.querySelectorAll(itemContainerSelector);
189			items.forEach((node) => {
190			node.remove();
191			});
192
193			const input = document.querySelector('input');
194			const navigationHelper = new ArrowNavigationHelper(
195			input,
196			itemContainerSelector,
197			itemSelector,
198			true
199			);
200
201			const event = new Event('keydown');
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The variable `Event` seems to be never declared. If this is a global, consider adding a `/** global: Event */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
202			event.key = 'tab';
203
204			input.dispatchEvent(event);
205
206			expect(navigationHelper._iterator).toBe(-1);
207			});
208
209			function expectActive(index, navigationHelper) {
			0 ignored issues – show Bug introduced 2020-01-29 13:28 UTC by Report Bug Copy Issue Report The function `expectActive` is declared conditionally. This is not supported by all runtimes. Consider moving it to root scope or using `var expectActive = function() { /* ... */ };` instead. Loading history...
210			const items = document.querySelectorAll('li');
211			expect(navigationHelper._iterator).toBe(index);
212
213			for (let i = 0; i < items.length; i++) {
214			if (i === index) {
215			expect(items[i].classList).toContain('is-active');
216			} else {
217			expect(items[i].classList).not.toContain('is-active');
218			}
219			}
220			}
221			});

shopware / platform

arrow-navigation.helper.test.js ➔ expectActive F last analyzed 2023-10-09 11:00 UTC

Complexity

Size

Duplication

Importance

How to fix Complexity

Complexity

Duplication Side-by-Side

Filter issues like

arrow-navigation.helper.test.js ➔ expectActive F
last analyzed 2023-10-09 11:00 UTC